<ion-content>

  <div style="display: flex;flex-direction:column-reverse;justify-content: flex-start;height: 100%;">

    <div margin>
      <ion-grid>
        <ion-row text-center="">
          <ion-col>
            <button ion-button outline style="border-radius: 70%;border-color: #ccc;width: 50px;height: 50px;">
              <img src="assets/icon/wechat.png" style="width: 24px;height: 18px;" (click)="thirdparty()"/>
            </button>
            <p no-margin="" style="font-size: 4px;color:#666666;">微信</p>
          </ion-col>

          <ion-col>
            <button ion-button outline style="border-radius: 70%;border-color: #ccc;width: 50px;height: 50px;">
              <img src="assets/icon/qq.png" style="width: 24px;height: 18px;"/>
            </button>
            <p no-margin="" style="font-size: 4px;color:#666666;">QQ</p>
          </ion-col>

          <ion-col>
            <button ion-button outline style="border-radius: 70%;border-color: #ccc;width: 50px;height: 50px;">
              <img src="assets/icon/weibo.png" style="width: 24px;height: 18px;"/>
            </button>
            <p no-margin="" style="font-size: 4px;color:#666666;">微博</p>
          </ion-col>

          <ion-col>
            <button ion-button outline style="border-radius: 70%;border-color: #ccc;width: 50px;height: 50px;">
              <img src="assets/icon/wangyi.png" style="width: 24px;height: 18px;"/>
            </button>
            <p no-margin="" style="font-size: 4px;color:#666666;">网易</p>
          </ion-col>


        </ion-row>
      </ion-grid>
    </div>
    <div margin>
      <div margin>
        <button ion-button round outline center block>手机号登录</button>
        <button ion-button round outline center block margin-top>注册</button>
        <button ion-button color="dark" clear block margin-top><p class="withUnderLine">游客试用</p></button>
      </div>
    </div>


  </div>


</ion-content>
